import React,{Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from  'redux';
import * as imgActions from '@/store/actions/img';
import imgStyle from './index.module.scss';
import BlockImage from '@/components/blockImage';
import Category from './category';
import SwiperDialog from './swiperDialog';

class Img extends Component{
    state = {
        categoryOpen:false,     //图片分类弹窗
        imageID:-1,             //当前分类的id
        page:1,                 //当前页码
        pageSize:30             //每页条数
    }
    render(){
        let {imageList,swiperOpen,categoryList} = this.props;
        let {categoryOpen,imageID,page,pageSize} = this.state;
        return <div className={imgStyle['img-wrap']}>
            <header className={imgStyle['header']}>
                <span>颜色</span>
                <span>车款</span>
            </header>
            {/* 内容 */}
            <section className={imgStyle['content']}>
                <ul>
                    {imageList.map(item => <li className={imgStyle['type']} key={item.Id}>
                        {
                            item.List.map((val,index) => index === 0 ?
                                <div key={index}>
                                    <span  onClick={this.openCategoryDialog.bind(this,item.Id)}>{item.Name}/<br/>{item.Count}</span>
                                    <BlockImage key={index} imgUrl={val.Url}></BlockImage>
                                </div>
                            :<BlockImage index={index} imageID={item.Id} getData={this.getData} key={index} imgUrl={val.Url}></BlockImage>)
                        }
                    </li>)}
                </ul>
                {categoryOpen ? <Category 
                                    getData={this.getData} 
                                    imageID={imageID}
                                    page={page}
                                    pageSize={pageSize}
                                    >
                                </Category> :null}
                {swiperOpen ? <SwiperDialog getData={this.getData} page={page}></SwiperDialog> :null}
            </section>
        </div>
    }
    componentDidMount(){
        //请求图片列表
        this.props.getImageList({SerialID:this.props.match.params.SerialID})
    }

    //获取当前分类的图片列表数据
    getData = (page,imageID) => {
        if(imageID === this.state.imageID){
            //不发请求
            return false;
        }

        //如果请求第一页数据
        if(page === 1){
            //数据初始化
            this.props.initCategory();
        }
        //发请求
        this.setState({
            page,
            imageID:imageID ? imageID : this.state.imageID
        },() => {
            let {pageSize,imageID} = this.state;
            this.props.getCategory({
                SerialID:this.props.match.params.SerialID,
                ImageID:imageID,
                Page:page,
                PageSize:pageSize
            })
        })
    }

    //打开弹窗
    openCategoryDialog(imageID){  //ImageID
        this.setState({
            categoryOpen:true,
            imageID
        },()=>{
            //获取对应分类的图片
            this.getData(1);
        })
    }
}

const stateMapToProps = (state) => {
    return {
        imageList:state.img.imageList,
        swiperOpen:state.img.swiperOpen,
        categoryList:state.img.categoryList
    }
}

const dispatchMapToProps = (dispatch) => {
    return bindActionCreators(imgActions,dispatch)  //作用；在action内可以使用dispatch
}

export default connect(stateMapToProps,dispatchMapToProps)(Img)